<template>
	<view class="box">
		<view class="fixed">
			<view class="fixedtop">常见问题</view>
			<view class="fixedbox">
				<view class="fixitem" @click="fixedClick('次月返模式')">
					<image src="./../../static/tabber/ci.jpg" mode=""></image>
					<span>次月返模式</span>
				</view>
				<view class="fixitem" @click="fixedClick('秒返模式')">
					<image src="./../../static/tabber/miao.jpg" mode=""></image><span>秒返模式</span>
				</view>
				<view class="fixitem" @click="fixedClick('哪些状态不结')">
					<image src="./../../static/tabber/zhuang.jpg" mode=""></image><span>哪些状态不结</span>
				</view>
				<view class="fixitem" @click="fixedClick('禁止行为')">
					<image src="./../../static/tabber/jin.jpg" mode=""></image><span>禁止行为</span>
				</view>
			</view>
		</view>
		
		
		<scroll-view class="chat-window" :scroll-into-view="scrollToViewId" scroll-y="true">
			<view class="content" :class="{tabClassRight:item.type==='1',tabClassLeft:item.type==='2'}"
				v-for="(item,index) in tabData" :key="index" :id="'item-' + index">
				<view class="tab">
					<view class="top" :class="{topTabRight:item.type==='1',topTabLeft:item.type==='2'}">
						{{item.type==='1'?'我':'客服'}}
						<span>{{item.sendTime}}</span>
					</view>
					<view class="bottom" :class="{topTabRight:item.type==='1',topTabLeft:item.type==='2'}">
						{{item.content}}
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- <view class="content" :class="{tabClassRight:item.type==='2',tabClassLeft:item.type==='1'}"
			v-for="(item,index) in tabData" :key="index" v-if="feedType=='0'">
			<view class="tab">
				<view class="top" :class="{topTabRight:item.type==='2',topTabLeft:item.type==='1'}">
					{{item.type==='1'?'我':'客户'}}
					<span>{{item.sendTime}}</span>
				</view>
				<view class="bottom" :class="{topTabRight:item.type==='2',topTabLeft:item.type==='1'}">{{item.content}}
				</view>
			</view>
		</view> -->
		<view class="button" @click="getBack">
			<view class="thisinput">
				<!-- <textarea type="text" rows="10" class="input" v-model="textareaData"></textarea> -->
				<u-input v-model="textareaData" :type="type" :border="border" :height="height"
					:auto-height="autoHeight" style="margin-right: 15rpx;"/>
				<span @click="sendClick">发送</span>
			</view>
		</view>
		<!-- <view class="model" v-if="modelData">
			<view class="content">
				
				<view class="des">反馈内容</view>
				<u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight"
					placeholder="请输入反馈内容" />
				<view class="u-slider__buttonn">
					<u-button type="primary" size="medium" @click="actionClick(0)">取消</u-button>
					<u-button type="primary" size="medium" @click="actionClick(1)">确定</u-button>
				</view>
			</view>
		</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		orderConsult
	} from "@/apis/orderConsult.js"
	import {
		orderDetail
	} from "@/apis/orderConsult.js"
	export default {
		data() {
			return {
				detailId: '',
				tabData: [],
				feedType: '',
				modelData: false,
				value: '',
				numOrder: '',
				border: true,
				height: 130,
				autoHeight: true,
				textareaData: '',
				scrollToViewId: '', // 滚动到的视图的id
				type: 'textarea',
				border: true,
				height: 44
			}
		},
		onShow(val) {
			// this.detailId = val.id;
			// this.feedType = val.feedType;
			orderDetail()
				.then(res => {
					if (res.code === 200) {
						this.tabData = res.data
					}
				})
		},
		methods: {
			fixedClick(val) {
				orderConsult({
						content: val,
						type: '1'
					})
					.then(res => {
						if (res.code === 200) {
							orderDetail()
								.then(res => {
									if (res.code === 200) {
										this.tabData = res.data;
										setTimeout(() => {
											this.scrollToViewId = 'item-' + (this.tabData.length - 1);
										}, 1000)
									}
								})
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success'
							})
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
			},
			sendClick() {
				if (this.textareaData == '') {
					this.$refs.uToast.show({
						title: '请输入反馈内容',
						type: 'error'
					})
					return;
				}
				// this.scrollToViewId = 'item-' + (this.tabData.length - 1);
				orderConsult({
						// orderId: this.numOrder,
						content: this.textareaData,
						type: '1'
					})
					.then(res => {
						if (res.code === 200) {
							orderDetail()
								.then(res => {
									if (res.code === 200) {
										this.tabData = res.data;
										// 滚动到最新消息
										// 假设 list 的最后一个元素的 id 是 'item-' + (list.length - 1)
										setTimeout(() => {
											this.scrollToViewId = 'item-' + (this.tabData.length - 1);
										}, 1000)
									}
								})
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success'
							})
							// this.numOrder = '';
							this.textareaData = '';
							// this.modelData = false;
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
			},
			getBack() {
				this.modelData = true;
			},
			actionClick(val) {
				if (val === 1) {
					// 发起反馈发接口
					if (this.value == '') {
						this.$refs.uToast.show({
							title: '请输入完整信息',
							type: 'error'
						})
						return;
					}
					orderConsult({
							// orderId: this.numOrder,
							content: this.value,
							type: '1'
						})
						.then(res => {
							if (res.code === 200) {
								orderDetail()
									.then(res => {
										if (res.code === 200) {
											this.tabData = res.data
										}
									})
								this.$refs.uToast.show({
									title: res.msg,
									type: 'success'
								})
								this.numOrder = '';
								this.value = '';
								this.modelData = false;
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error'
								})
							}
						})
				} else {
					//取消
					this.modelData = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		width: 750rpx;
		background-color: #F0EFF4;
		padding: 30rpx 30rpx 150rpx 30rpx;
		box-sizing: border-box;

		.fixed {
			width: 690rpx;
			height: 160rpx;
			border-radius: 20rpx;
			background-color: white;
			position: fixed;
			z-index: 9;
			// left: 30rpx;
			top: 100rpx;

			.fixedtop {
				color: #908BC6;
				font-size: 25rpx;
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F1F1F1;
			}

			.fixedbox {
				width: 100%;
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.fixitem {
					height: 100%;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					image {
						height: 50rpx;
						width: 50rpx;

					}

					span {
						display: flex;
						font-size: 20rpx;
					}
				}
			}
		}

		.chat-window {
			height: 100vh;
			// overflow-y: auto;
			/* 或者其他合适的高度 */
		}


		.content {
			width: 100%;
			min-height: 150rpx;
			margin-bottom: 30rpx;

			.tab {
				height: 100%;
				min-width: 40%;
				background-color: white;
				border-radius: 25rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.top {
					display: flex;
					align-items: center;
					// justify-content: center;
					font-size: 20rpx;
					color: #969696;
					margin-bottom: 20rpx;

					span {
						margin-left: 10rpx;
					}
				}

				.topTabRight {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.topTabLeft {
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				.bottom {
					padding: 0 20rpx;
					box-sizing: border-box;
					word-wrap: break-word;
					/* 允许单词内断行 */
					white-space: normal;
					/* 处理空白符，自动换行 */
					line-height: 1.6;
				}
			}
		}

		.button {
			position: fixed;
			z-index: 9;
			left: 0;
			bottom: 0;
			min-height: 140rpx;
			width: 750rpx;
			line-height: 120rpx;
			// text-align: center;
			// color: white;
			background-color: #F6F6F6;
			padding: 20rpx 40rpx 20rpx 40rpx;
			box-sizing: border-box;

			.thisinput {
				width: 100%;
				min-height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.input {
					width: 88%;
					height: 100rpx;
					line-height: 100rpx;
					background-color: white;
					padding-left: 18rpx;
					box-sizing: border-box;
					word-wrap: break-word;
					border: 1rpx solid red;
				}

				span {
					font-size: 33rpx;
					font-weight: bold;
				}
			}
		}

		.tabClassRight {
			display: flex;
			justify-content: flex-end;
		}

		.tabClassLeft {
			display: flex;
			justify-content: flex-start;
		}
	}

	.model {
		height: 100vh;
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		background-color: rgba(51, 51, 51, .4);
		padding: 320rpx 32rpx 0 32rpx;
		box-sizing: border-box;

		.content {
			width: 100%;
			height: 460rpx;
			background-color: white;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			color: #656565;
			overflow: hidden;

			.title {

				margin-bottom: 35rpx;
			}

			.back {
				width: 100%;
				height: 90rpx;
				background-color: #F8F9FD;
				border-radius: 20rpx;
				display: flex;
				align-items: center;

				input {
					width: 92%;
					height: 60rpx;
					padding-left: 30rpx;
					box-sizing: border-box;
				}
			}

			// .submit{
			.des {
				margin: 35rpx 0;
			}

			.u-slider__buttonn {
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: space-around;
				margin-top: 52rpx;
			}

			// 	width: 100%;
			// 	height: 100rpx;
			// }
		}
	}
</style>